<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单练习</title>
</head>
<body>
    <form action="Demo1.html" method="get">
    用户名：<input type="text" size="30" name="userName"><br/>
    密码：<input type="password" szie="30" name="password"><br/>
    性别: <input type="radio" name="gender" id="0" value="0" > <label for="0">男</label> 
          <input type="radio" name="gender" id="1" value="1"> <label for="1">女</label><br/>
    兴趣： <input type="checkbox" name="hobby" id="" value="0"> 篮球
           <input type="checkbox" name="hobby" id="" value="1"> 足球
           <input type="checkbox" name="hobby" id="" value="2"> 乒乓球
           <input type="checkbox" name="hobby" id="" value="3"> 排球
           <p>
            input后接type，text文本输入、password密码输入、radio单选输入
            checkbox复选框输入<br/>
            name是传给后端接收处理数据的，id则是对齐识别数据<br/>
            label标签标识当前文本对应id，绑定后点击文本也能识别选择，如点击“男”也能选中<br/>
           </p>
           <button>这是button标签</button>
           <input type="button" value="这是input:button的按钮">
           <input type="submit" value="这是input:submit的按钮">
           <p>
            button标签与input：button的按钮没什么区别<br/>
            而submit的按钮通过form标签绑定文本域可以链接后端，给后端提交信息<br/>
            即submit的父标签form标签区域提交给后端<br/>
            action选择提交给谁，可以提交给后端也可以给前端，后跟url，url提交给后端也是调用后端接口
            ，通过给后端接口传参调用，调用的接口与传参通过‘&’分割，传参通过“=”<br/>
             对于选择框的传参需要通过value标签区分，不然仅会传过去“on”/“off”区分是否选择而不是选择了什么<br/>
            method选择提交方法，常用get与post，get：从服务端获取资源
            post：向服务器发送资源。虽说如此定义但二者功能基本一致
           </p>
           <p>
            file:///C:/gitee/html.git/Demo1.html?userName=%E5%BC%A0%E4%B8%89&password=123&gender=0&hobby=0&hobby=2<br/>
            以上便是传给“Demo1.html”的内容，从Demo1.html?开始（以？标识）分别是userName（张三）被编码了<br/>
            以‘&’分隔参数password与gender，同时可以看到gender与hobby所选的value<br/>
           </p>
           <p>
            ps. button也有提交作用
           </p>
           <p>
            专业:<select>
                <option value="0">计科</option>
                <option value="1">软工</option>
                <option value="2">网安</option>
                <option value="3" selected>人工智能</option>
                selected默认选择<br/>
            </select>
           </p>
           <p>
            个人描述：<textarea rows="10" cols="50">

            </textarea><br/>
            <p>
                无语义标签div：division 分割，独占一行
                无语义标签span：跨度，行内跨度
                <div>我是一个div</div>
                <span>我是一个span</span>
                <span>我是一个span</span>
                div独占一行，所以效果上自带换行
            </p>
            <p>
                 标签分为块级标签与行级标签<br/>
                 块级标签 可独占一行 如：h1-h6、p、div <br/>
                 行级标签 不独占一行 如：a（超链接标签，可传非传统文本内容）、input、span
            </p>
           </p>
        </form>
</body>
</html>